<template>
<div>
<router-link to="/register"><el-button style="float: right; padding: 10px" el-button type="danger" plain >点   我   注   册</el-button></router-link>
<el-container>
  <el-header id="abc">校 园 帮 帮</el-header>
  <el-container >
    <el-main id="abb">
        <el-form :model="loginForm" id="login-container">
            <el-form-item label="电话" :lable-width="formLabelWidth">
                <el-input v-model="loginForm.phone" autocomplete="off" placeholder="请输入账号"></el-input>
            </el-form-item>
            <el-form-item label="密码" :lable-width="formLabelWidth">
                <el-input v-model="loginForm.password" placeholder="请输入密码" autocomplete="off" show-password></el-input>
            </el-form-item>
            <el-form-item> 
                <el-button type="primary" @click="checkLogin" :loading="loginLoading">登录</el-button>
            </el-form-item>
        </el-form>
    </el-main>
  </el-container>
</el-container>
</div>
</template>
<script>
import {login} from '@/services/user'
import {getNewsByTypeNum} from'@/services/news'
import {mapState} from 'vuex'
import {mapMutations} from "vuex";
import {setToken} from '@/util/auth'

export default {
    // name:'login',
    data:function(){
        return{
            showLogin:false,
            loginForm:{
                userId:'',
                password:'',
                phone:''
            },            
            formLabelWidth: '100px',
            loginLoading:false,
            newsListCar:[],
        }
    },
    computed:{
        ...mapState('account',['user']),//扩展运算符。从vuex中的模块account中获取user这个数据
    },
    mounted:function(){
        getNewsByTypeNum({newsTypeId:3,newNum:5}).then(res=>{
            console.log(res.data)
            this.newsListCar = res.data;
        })
    },
    methods: {
        ...mapMutations("account",["setUser","setRoles"]),//用于修改vuex里面的值
        handleClose(done){  
            this.$confirm('确认关闭?')
            .then(_=>{
                done();
            })
            .catch(_=>{});
        },
        checkLogin:function(){
            this.loginLoading=true;
            login(this.loginForm).then(res=>{ 
                    if(res.success){
                        setToken(res.data.token)
                        this.loginLoading = false;
                        this.showLogin = false;
                        this.$router.push({
                            name:'index'
                        })
                    }else{
                        this.$message.error(res.err.msg);
                        this.loginLoading = false;
                    }
                }
            ).catch(err=>{
                console.log(err)
            })
        },
        handleCommand:function(command){
            if(command == 'logout'){
                this.$store.dispatch('account/resetToken')
                this.$router.go(0)
            }
        }
    }
}
</script>

<style>
  #abc{
    background-color: #f4f6f8;
    text-align: center;
    line-height: 150px;
    font-size: 70px;
    margin-top:30px;
    display:inline-block;font-weight:bold;color:rgb(238, 47, 22);text-shadow:0 0 1px currentColor,-1px -1px 1px rgb(248, 246, 246),0 -1px 1px rgb(214, 211, 211),1px -1px 1px rgb(51, 50, 50),1px 0 1px #000,1px 1px 1px #000,0 1px 1px #000,-1px 1px 1px rgb(8, 8, 8),-1px 0 1px #000;-webkit-filter:url(#diff1);filter:url(#diff1);
  }
  
  #abb {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    /* line-height: 0px; */
  }

  #login-container {
    border-radius: 7px;
    background-clip: padding-box;
    margin: 210px auto;
    width: 400px;
    padding: 35px 35px 15px 35px;
    background-color: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #6e6d6d;
  }
</style>